import React, { useState,useEffect } from "react";
import "./Home.less";
import { Layout, Menu, Switch, Popover, Button } from "antd";
import {
  BankOutlined,
  AppstoreOutlined,
  FileProtectOutlined,
  SmileOutlined,
  AccountBookOutlined,
  TeamOutlined,
  PhoneOutlined,
  SettingOutlined,
  MenuUnfoldOutlined,
  MenuFoldOutlined,
} from "@ant-design/icons";
import { Link } from "react-router-dom";
import MyRouter from "../../router";
import store from "../../store/store";
import http from "../../utils/http";
import logo from "../../assets/logo.png";

const { Header, Sider, Content } = Layout;
const { SubMenu } = Menu;

const Home = () => {
  const [collapsed, setCollapsed] = useState(false);
  const [logoShow, setLogo] = useState(true);
  const [mode, setMode] = useState(true);
  const [username, setUsername] = useState('');
  const [headpic, setHeadpic] = useState('');



useEffect(() => {
  console.log(store.user);
  let usermsg =JSON.parse(sessionStorage.getItem("user"))  || {}
  // if(!usermsg){usermsg=store.user}
  const {avatar,username} =usermsg
  setUsername(username)
  setHeadpic(avatar)
}, [store.user])

  const toggle = () => {
    setCollapsed(!collapsed);
    setLogo(!logoShow);
  };

  const changeMode = (checked) => {
    setMode(checked);
  };

  //退出
  const edit = () => {
    sessionStorage.removeItem("token");
    store.setToken("");
    sessionStorage.removeItem("user");
    store.setUser("");
    window.location.href = "/";
  };
  //个人信息气泡卡片
  const text = <span>个人信息</span>;
  const content = (
    <div>
      <p>用户：{username}</p>
      模式：
      <Switch
        checkedChildren="白天"
        unCheckedChildren="黑夜"
        defaultChecked
        onChange={changeMode}
      />
      <p>
        <Button type="primary" onClick={edit} style={{ marginTop: "20px" }}>
          退出
        </Button>
      </p>
    </div>
  );
  const buttonWidth = 70;

  return (
    <Layout style={{ height: "100%" }}>
    <Sider
      trigger={null}
      collapsible
      collapsed={collapsed}
      style={{
        background: mode ? "white" : "",
        boxShadow: mode ? "5px 0 10px gray" : "none",
      }}
    >
      <img src={logo} alt="" className={logoShow ? "logo" : "minlogo"} />
      <Menu
        theme={mode ? "light" : "dark"}
        mode="inline"
        defaultSelectedKeys={["1"]}
        style={{
          fontSize: "18px",
        }}
      >
        <Menu.Item key="1" icon={<BankOutlined />}>
          <Link to={"/home/homepage"}>首页</Link>
        </Menu.Item>
        <SubMenu key="2" icon={<AppstoreOutlined />} title="商品管理">
          <Menu.Item key="3">
            <Link to={"/home/ruku"}>选品入库</Link>
          </Menu.Item>
          <Menu.Item key="4">
            <Link to={"/home/list"}>商品列表</Link>
          </Menu.Item>
          <Menu.Item key="5">
            <Link to={"/home/type"}>分类列表</Link>
          </Menu.Item>
        </SubMenu>
        <Menu.Item key="6" icon={<FileProtectOutlined />}>
          <Link to={"/home/order"}>订单管理</Link>
        </Menu.Item>
        <Menu.Item key="7" icon={<SmileOutlined />}>
          <Link to={"/home/aftersales"}>售后管理</Link>
        </Menu.Item>
        <Menu.Item key="8" icon={<AccountBookOutlined />}>
          <Link to={"/home/financial"}>财务管理</Link>
        </Menu.Item>
        <SubMenu key="9" icon={<TeamOutlined />} title="用户管理">
          <Menu.Item key="10">
            <Link to={"/home/User"}>用户管理</Link>
          </Menu.Item>
          <Menu.Item key="11">
            <Link to={"/home/MemberLevel"}>会员等级</Link>
          </Menu.Item>
          <Menu.Item key="12">
            <Link to={"/home/MemberTag"}>会员标签</Link>
          </Menu.Item>
        </SubMenu>
        {/*<SubMenu key="13" title="客服管理">*/}
          <Menu.Item key="14" icon={<PhoneOutlined />}>
            <Link to={"/home/custormerservice"}>客服管理</Link>
          </Menu.Item>
        {/*</SubMenu>*/}
        <Menu.Item key="16" icon={<SettingOutlined />}>
          <Link to={"/home/diy"}>DIY设置</Link>
        </Menu.Item>
      </Menu>
    </Sider>
    <Layout className="site-layout">
      <Header id="home_head" style={{ padding: 0 }}>
        <div id="headMsg">
          <span id="heaLeft">
            {React.createElement(
              collapsed ? MenuUnfoldOutlined : MenuFoldOutlined,
              {
                className: "trigger",
                onClick: toggle,
              }
            )}
            <span id="title">欢迎进入B2C商城后台管理系统</span>
          </span>
          <span id="headRight">
            <div
              style={{
                marginLeft: buttonWidth,
                whiteSpace: "nowrap",
                cursor: "pointer",
              }}
            >
              <Popover
                placement="bottom"
                title={text}
                content={content}
                trigger="click"
              >
                <img src={headpic} alt="" id="headpic" />
                <span>{username}</span>
              </Popover>
            </div>
          </span>
        </div>
      </Header>

      <Content
        className="site-layout-background"
        id="home_content"
        style={{
          background: mode ? "white" : "#073159",
        }}
      >
        <MyRouter />
      </Content>
    </Layout>
  </Layout>
  );
};

export default Home;
